<template>
  <div>
    <van-search
      v-model="searchValue"
      placeholder="请输入搜索关键词"
      shape="round"
    />

    <!-- 搜索关键字 -->
    <div class="search_wrap" v-if="searchList.length === 0">
      <p class="hot_title">热门搜索</p>
      <!-- 关键字 -->
      <ul class="hot_name_wrap">
        <li
          class="hot_item"
          @click="btn(h.first)"
          v-for="(h, index) in hotList"
          :key="index"
        >
          {{ h.first }}
        </li>
      </ul>
    </div>

    <!-- 搜索结果 -->
    <div class="hot_search" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <p class="hot_title">最佳匹配</p>
        <MyCell :List="searchList" :hasSong="false"></MyCell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { hotSearchApi, searchResultApi } from "@/api/index";
import MyCell from "@/components/MyCell.vue";
export default {
  data() {
    return {
      // 搜索框中输入的文字
      searchValue: "",
      // 热搜文字列表
      hotList: [],
      // 搜索结果
      searchList: [],
      loading: false, // 加载结束
      finished: false, // true则表示数据加载完成
      page:1,
    };
  },
  async created() {
    const result = await hotSearchApi();
    this.hotList = result.data.result.hots;
  },
  methods: {
    async btn(str) {
      // 将点击的文字在搜索框中显示
      this.searchValue = str;
      // 点击文字直接发送请求获取数据
      const res = await searchResultApi({
        type: 1,
        keywords: this.searchValue,
      });
      this.searchList = res.data.result.songs;
      // 防止再次发送请求
      setTimeout(() => {
        clearTimeout(this.timer);
      });
    },
    // 触底后会执行该函数
    async onLoad() {
      this.page++;
      console.log("我出来了");
      const res = await searchResultApi({
        type: 1,
        keywords: this.searchValue,
        offset:(this.page-1)*30,
      });
      // 将请求回来的数据拼接到原来的数组中
      res.data.result.songs.forEach(obj => {
        this.searchList.push(obj);
      });
      this.loading = false;

      if (this.searchList.length >= 60) {
        this.finished = true;
      }
    },
  },
  watch: {
    // 监听搜索框内文字的变化，一旦改变(点击关键字/手动输入文字)就发送请求获取热搜内容
    searchValue(value) {
      clearTimeout(this.timer);
      if (value.length === 0) return (this.searchList = []);
      // 如果搜索框中有值，则发送请求获取搜索结果列表
      // 0.5s内倒计时发送请求，如果输入框的值有变化则重新计时（防抖）
      this.timer = setTimeout(async () => {
        const res = await searchResultApi({
          type: 1,
          keywords: value,
        });
        this.searchList = res.data.result.songs;
      }, 500);
    },
  },
  components: { MyCell },
};
</script>

<style scoped>
/* deep样式穿透 */
/* 设置搜索框中的样式 */
/deep/ .van-field__control {
  font-size: 14px;
}
/* 热门搜索的文字标题 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}
/* 热门搜索的容器 */
.search_wrap,
.hot_search {
  padding: 0.266667rem;
}
/* 热门搜索-关键字 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin: 0 0.213333rem 0.213333rem 0;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>